<template>
  <div class="info_edit_cont">
    <div class="info_list">
      <el-form ref="form" :rules="rules" v-bind="getFormProps()">
        <div class="tem_cont">
          <el-row v-for="(item, index) in thiscourse.list" :key="index" v-if="item.value">
            <el-col :span="5" style="text-align:right; padding-right: 30px;">
              <div class="tab_title">
                <b>{{item.name}}</b>
                <p class="chart_tip" v-if="item.type == 'setRadio'">学生</p>
                <p class="chart_tip tip_coach" v-if="item.type == 'setRadio'">教练</p>
              </div>
            </el-col>
            <el-col :span="19">
              <div v-if="item.type == 'textarea'">
                <el-input type="textarea" v-model="item.valueData" :maxlength="item.maxLength" :placeholder="item.placeholder" :rows="5" number-word></el-input>
              </div>
              <div v-if="item.type == 'checkbox'">
                <el-checkbox-group v-model="item.valueData">
                  <el-checkbox v-for="(stime, sindex) in item.listValue" :key="sindex" :label="stime">{{stime}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div v-if="item.type == 'number'">
                <el-form-item label="" :prop="item.prop" label-width="0" style="margin-bottom:0px;">
                  <el-input type="number" v-model="item.valueData" style="width:100px;" @change="setCheckData(item.prop, item.valueData)"></el-input> {{item.unit}} <span class="remark_text">{{item.remark}}</span>
                </el-form-item>
              </div>
              <div v-if="item.type == 'setRadio'">
                <el-radio-group v-model="item.valueData">
                  <el-radio :label="1" style="margin-right:25px;"><img src="/static/images/training/s11.png" v-if="item.valueData==1"><img src="/static/images/training/s1.png" v-else></el-radio>
                  <el-radio :label="2" style="margin-right:25px;"><img src="/static/images/training/s22.png" v-if="item.valueData==2"><img src="/static/images/training/s2.png" v-else></el-radio>
                  <el-radio :label="3" style="margin-right:25px;"><img src="/static/images/training/s33.png" v-if="item.valueData==3"><img src="/static/images/training/s3.png" v-else></el-radio>
                  <el-radio :label="4" style="margin-right:25px;"><img src="/static/images/training/s44.png" v-if="item.valueData==4"><img src="/static/images/training/s4.png" v-else></el-radio>
                </el-radio-group>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="button-box">
      <el-button @click="goBackList">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :disabled="!submitState">确 定</el-button>
    </div>
  </div>
</template>
<script>
import {form} from 'utils/mixins' // 引入form mixin
import trainApi from 'api/train'
export default {
  mixins: [form],
  props: {
    thiscourse: {
      type: Object,
      default: {}
    },
    thisCourseId: {
      type: String,
      default: ''
    }
  },
  watch: {
    thiscourse: {
      handler: function (val) {
        let stateArr = []
        for (let item of val.list) {
          if ((['textarea', 'number', 'radio', 'setRadio'].includes(item.type) && item.valueData) || (['checkbox'].includes(item.type) && item.valueData && item.valueData.length > 0)) {
            stateArr.push(true)
          } else {
            stateArr.push(false)
          }
        }
        if (stateArr.includes(true)) {
          this.submitState = true
        } else {
          this.submitState = false
        }
      },
      deep: true
    }
  },
  data () {
    var checkTime = (rule, value, callback) => {
      if (!(/^([0-9]|[1-9]\d|[1]\d\d|200)$/.test(value))) {
        callback(new Error('请输入0-200的整数'))
      } else {
        callback()
      }
    }
    var checkCount = (rule, value, callback) => {
      if (!(/^([0-9]|[1-9]\d|[1-4]\d\d|500)$/.test(value))) {
        callback(new Error('请输入0-500的整数'))
      } else {
        callback()
      }
    }
    return {
      loading: false, // 必需要返回loading
      submitState: false,
      form: {
        time: '',
        count: ''
      },
      rules: {
        time: [
          { validator: checkTime, trigger: 'blur' }
        ],
        count: [
          { validator: checkCount, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    setCheckData: function (type, value) {
      this.form[type] = value
    },
    handleSubmit: function () { // 提交后台数据
      let isSet = true
      if (this.form.time) {
        this.$refs['form'].validateField('time', (val) => {
          if (val) {
            isSet = false
          }
        })
      }
      if (this.form.count) {
        this.$refs['form'].validateField('count', (val) => {
          if (val) {
            isSet = false
          }
        })
      }
      if (isSet) {
        this.handlegetProcess()
      }
    },
    handlegetProcess: function () {
      let type = 'POST'
      trainApi.getProcess({
        id: this.thisCourseId,
        scheduleId: this.$route.query.scheduleid,
        processInfo: JSON.stringify(this.thiscourse)
      }, type).then((res) => {
        this.$emit('cancelTeachingCourseAdd')
      })
    },
    goBackList: function () {
      this.$emit('cancelTeachingCourseAdd')
    }
  }
}
</script>
<style lang="scss">
.info_edit_cont{
  margin-bottom:80px;
  .equipment{
    .el-radio{
      margin-bottom:20px;
    }
  }
  .chart_tip{
    text-align: center;
    font-weight:normal;
    position: relative;
    line-height: 26px;
    &:before{
      position: absolute;
      top:8px;
      left:42px;
      display: table;
      content: "";
      width:10px;
      height:10px;
      background:#00bb90;
    }
  }
  .tip_coach{
    &:before{
      border-radius: 50%;
    }
  }
}
</style>
